JSX Runtime

JSXを書いている利用者は特に意識することはない

React本家のblog

参考

従来

code:ts

import React from 'react';

function App() {

return <h1>Hello World</h1>;

}

従来

code:ts

import React from 'react';

function App() {

return React.createElement('h1', null, 'Hello world');

}

今後

code:ts

import {jsx as _jsx} from 'react/jsx-runtime';

function App() {

return _jsx('h1', { children: 'Hello world' });

}

JSXからJSに変換する結果が変わった

内部でのパフォーマンスの最適化をしやすくなる

当時はclassでcomponentを書くのが普通だったので、それに適していた

しかし、functional componentには適していない

React.createElementは自分で書くことも意図されていた

パフォーマンスの最適化がやりづらい

childrenの扱いが、transpile時に決定できるのにruntime時にやってて効率が悪い

buid sizeが少し小さくなる

明示的にReactをimportしないでいい

新しい JSX 変換方式を使う

code:js

/** @jsxRuntime automatic */

古い JSX 変換方式を使う

typescriptを使っている時